<template>
  <div class="horizontal-rules py-1" :style="style">
    <div
      v-for="(item, key) in comW"
      :key="key"
      class="scales"
      :style="{ left: (item - 1) * 10 + 'px' }"
      :class="{ 'high-line': (item - 1) % 5 === 0 }"
    >
      <span v-if="(item - 1) % 5 === 0">{{ item - 1 }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  width: {
    type: Number
  }
});
const style = computed(() => {
  return {
    width: `${props.width}px`
  };
});
const comW = computed(() => {
  if (props.width) return Math.ceil(props.width / 10);
  return 0;
});
</script>

<style lang="scss" scoped>
.horizontal-rules {
  position: absolute;
  border-bottom: 1px solid #eee;
  left: 0;
  top: -15px;
  height: 5px;
  .scales {
    height: 50%;
    top: 50%;
    width: 1px;
    background-color: #999;
    position: absolute;
    font-size: 12px;
    span {
      transform: scale(0.5) translateX(-80%) translateY(-140%);
      color: #666;
      display: inline-block;
      width: 14px;
      left: 0;
    }
  }
  .high-line {
    height: 100%;
    top: 0%;
  }
}
</style>
